<template>
  <div class="order">
    <!-- <el-row class="left">
      <el-col :span="3" class="top">下单时间</el-col>
      <el-col :span="19">
        <el-steps align-center>
          <el-step title="2020年" status="wait" description="1月" />
          <el-step title="2020年" status="wait" description="2月" />
          <el-step title="2020年" status="success" description="3月" />
          <el-step title="2020年" status="wait" description="4月" />
        </el-steps>
      </el-col>
    </el-row> -->

    <div class="right">
      <div class="top">
        <div class="all_order">全部订单</div>
      </div>
      <div class="order_all">
        <el-space :size="12" alignment="center" style="width: 300px; height: 100%">
          <el-checkbox style="margin-left: 10px" v-model="checked1" @change="selectHanfle" label="全选" size="large" />
          <el-button type="danger" size="small" round>合并支付</el-button>
        </el-space>
      </div>
      <el-table :data="tableData" style="width: 100%" ref="ref" @selection-change="handleSelectionChange" @toggleAllSelection="slelctAll">
        <el-table-column type="selection" width="40" label="全选" />
        <el-table-column label="订单号">
          <template #default="scope">
            <el-tooltip class="box-item" effect="dark" content="复制" placement="top">
              <span style="cursor: pointer" class="copy" :data-clipboard-text="scope.row.orderId" @click="copy">{{ scope.row.orderId }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="商品" width="250">
          <template #default="scope">
            <el-space direction="vertical">
              <el-space v-for="i in scope.row.orderInfoList" :key="i.productId">
                <el-image :src="i.image" style="width: 100px"></el-image>
                <span>{{ i.storeName }}</span>
              </el-space>
            </el-space>
          </template>
        </el-table-column>
        <el-table-column label="销售价(单)">
          <template #default="scope">
            <el-space direction="vertical">
              <span v-for="i in scope.row.orderInfoList" :key="i.productId">{{ i.price }}</span>
            </el-space>
          </template>
        </el-table-column>
        <el-table-column label="数量(单)">
          <template #default="scope">
            <el-space direction="vertical">
              <span v-for="i in scope.row.orderInfoList" :key="i.productId">{{ i.cartNum }}</span>
            </el-space>
          </template>
        </el-table-column>
        <el-table-column prop="totalNum" label="数量(总)" />
        <el-table-column prop="payPrice" label="小计" />
        <el-table-column prop="orderStatus" label="订单状态" />
      </el-table>
    </div>
  </div>
</template>

<script>
import Clipboard from 'clipboard'
export default {
  name: 'order',
  data() {
    return {
      tableData: [],
    }
  },
  created() {
    this.getOrderLists()
  },
  methods: {
    getOrderLists() {
      this.$http
        .get('order/list?type=0')
        .then((res) => {
          if (res.data.code === 200) {
            this.tableData = res.data.data.list
            console.log(res.data.data.list)
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((e) => {
          this.$message.error(e.message)
        })
    },
    async copy() {
      let clipboard = new Clipboard('.copy')
      clipboard.on('success', (e) => {
        this.$message.success('复制成功')
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', (e) => {
        // 不支持复制
        this.$message.warning('该浏览器不支持复制')
        // 释放内存
        clipboard.destroy()
      })
    },
  },
}
</script>

<style scoped lang="scss">
.order {
  width: 100%;
  display: flex;
  flex-direction: column;
  .right {
    // width: 1000px;
    width: 100%;
    display: flex;
    flex-direction: column;
    .top {
      width: 1000px;
      height: 44px;
      display: flex;
      justify-content: space-between;
      .all_order {
        width: 112px;
        color: #323232;
        height: 100%;
        border-bottom: 1px solid red;
        font-size: 14px;
        text-align: center;
        line-height: 44px;
        box-sizing: border-box;
      }
    }
    .el-table {
      border: 1px solid #e6e8ea;
    }
    .el-table thead {
      background: red;
    }
  }

  .left {
    width: 100%;
    // height: 100%;
    display: flex;
    .top {
      height: 44px;
      font-size: 14px;
      color: #000;
      text-align: center;
      line-height: 44px;
      font-weight: 600;
    }
  }
}
</style>
